layui.config({
    base: 'layui/module/'
}).extend({
    sortable: 'pagebuilder/Sortable.min'
}).use(['jquery', 'sortable', 'table', 'treeTable'], () => {
    let $ = layui.jquery, sortable = layui.sortable, table = layui.table, treeTable = layui.treeTable;

    let removeLayuiForm = jqObj => {
        if (jqObj.parent().hasClass('layui-form'))
            jqObj.parent().remove();
        else
            removeLayuiForm(jqObj.parent());
    };

    let renderProps = () => {
        $('.priview-container .layui-icon-delete').each((i, o) => {
            $(o).off('click');
            $(o).on('click', e => {
                removeLayuiForm($(e.currentTarget));
                renderProps();
            });
        });
        $('.property-container').html('<pre>' + $('.priview-container').html().replaceAll('<i class="layui-icon layui-icon-delete"></i>', '').replaceAll('draggable="false"', '').replaceAll('style=""', '').replaceAll('style="transition: transform 150ms ease 0s; transform: translate3d(0px, 0px, 0px);"', '') + '</pre>');
        layui.code({
            elem: '.property-container pre',
            header: true,
            wordWrap: false
        });
    };

    $('.element-container > .layui-tab-content > .layui-tab-item').each((i, o) => {
        sortable.render(o, {
            group: {
                name: 'shared',
                pull: 'clone',
                put: false
            },
            animation: 150,
            sort: false,
            onEnd: e => {
                renderProps();
                $(e.item).after('\n');
            }
        });
        sortable.render($('.priview-container')[0], {
            group: 'shared',
            animation: 150,
            onEnd: e => renderProps()
        });
    });

    /*表格选中行 start*/
    table.render({
        elem: '#checked-row-table-demo',
        url: 'json/table.json', // 此处为静态模拟数据，实际使用时需换成真实接口
        page: true,
        cols: [[
            // {type: 'radio', fixed: 'left'},
            {
                field: 'id',
                title: '<i class="layui-icon layui-icon-delete"></i>ID',
                width: 80,
                fixed: 'left',
                unresize: true
            },
            {field: 'username', title: '用户', width: 120},
            {field: 'sex', title: '性别', width: 80},
            {field: 'city', title: '城市', width: 100},
            {field: 'sign', title: '签名'},
            {field: 'experience', title: '积分', width: 80, sort: true}
        ]],
        toolbar: '#checked-row-table-demo-toolbar',
        initSort: { // 设置初始排序
            field: 'experience', // 字段名
            type: 'desc' // 倒序
        },
        height: 366
    });

    // 行单击事件( 双击事件为: rowDouble )
    table.on('row(checked-row-table-demo)', o => {
        layer.msg('当前行数据：<br>' + JSON.stringify(o.data), {
            offset: '65px'
        });

        o.setRowChecked({
            type: 'radio'
        });
    });

    // 头工具栏事件
    table.on('toolbar(checked-row-table-demo)', o => {
        if (o.event === 'getCheckData')
            layer.alert(JSON.stringify(table.checkStatus(o.config.id).data));
    });
    /*表格选中行 end*/

    /*treeTable start*/
    let inst = treeTable.render({
        elem: '#tree-table-demo',
        url: 'json/tree-table.json',
        maxHeight: '500px',
        toolbar: '#tree-table-demo-toolbar',
        cols: [[
            {type: 'checkbox', fixed: 'left'},
            {
                field: 'id',
                title: '<i class="layui-icon layui-icon-delete"></i>ID',
                width: 80,
                sort: true,
                fixed: 'left'
            },
            {field: 'name', title: '用户名', width: 180, fixed: 'left'},
            {field: 'sex', title: '性别', width: 80, sort: true},
            {field: 'experience', title: '积分', width: 90, sort: true},
            {field: 'city', title: '城市', width: 100},
            {fixed: "right", title: "操作", width: 190, align: "center", toolbar: "#tree-table-demo-tools"}
        ]],
        page: true
    });

    // 表头工具栏工具事件
    treeTable.on("toolbar(tree-table-demo)", o => {
        let status = treeTable.checkStatus(o.config.id);

        // 获取选中行
        if (o.event === "getChecked") {
            if (!status.data.length) return layer.msg('无选中数据');

            console.log(status);

            layer.alert("当前数据选中已经输出到控制台，<br>您可按 F12 从控制台中查看结果。");
        }
    });

    // 单元格工具事件
    treeTable.on('tool(' + inst.config.id + ')', o => {
        let trData = o.data;

        switch (o.event) {
            case 'detail':
                layer.msg("查看操作：" + trData.name);
                break;

            case 'addChild':
                layer.msg('拷贝至本地可用，这里的id有冲突')
                /*treeTable.addNodes(o.config.id, {
                    parentIndex: trData["LAY_DATA_INDEX"],
                    index: -1,
                    data: {id: Date.now(), name: "新节点"}
                });*/
                break;

            case 'more':
                layer.msg('更多');
                break;
        }
    });

    /*treeTable end*/
});